<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>订单管理</title>
    <link th:href="@{../static/css/style.css}" rel="stylesheet" />
    <link th:href="@{../static/css/backend.css}" rel="stylesheet" />
    <link th:href="@{../static/css/page/backend/order-manage.css}" rel="stylesheet" />
    <link th:href="@{../plugins/datepicker/css/bootstrap.css}" rel="stylesheet" />
    <link th:href="@{../plugins/datepicker/css/bootstrap-datepicker.css}" rel="stylesheet" />
    <link th:href="@{../plugins/select2/css/select2.min.css}" rel="stylesheet" />
</head>
<body>
<div id="hd">

    <div class="header-nav">
        <div class="navigation-inner">
            <div class="logo">
                <h1>
                    <a href="mgt_console.html" class="logo-img">电商运营平台</a>
                </h1>
            </div>
            <div class="header-categories" id="nav-con">
                <ul class="menu">
                    <li class="menu-item selected">
                        <h2>
                            <a href="mgt_console.html">安全总览</a>
                        </h2>
                    </li>
                    <li class="menu-item has-sub">
                        <h2>
                            <a href="cloud_service.html">云服务管理<i class="iconfont">&#xe61c;</i></a>

                        </h2>

                        <div class="menu-item-panel clearfix">

                            <div class="submenu-col">
                                <div class="submenu-item">
                                    <h3>
                                        <i class="iconfont">&#xe62d;</i>
                                        <span>虚拟化安全服务</span>
                                    </h3>
                                    <ul>
                                        <li class="submenu"><a href="javascript:;">虚拟防火墙及入侵防御服务</a></li>
                                    </ul>
                                </div>

                                <div class="submenu-item">
                                    <h3>
                                        <i class="iconfont">&#xe62f;</i>
                                        <span>主机安全服务</span>
                                    </h3>
                                    <ul>
                                        <li class="submenu"><a href="javascript:;">漏洞检测服务</a></li>
                                    </ul>
                                </div>

                                <div class="submenu-item">
                                    <h3>
                                        <i class="iconfont">&#xe62e;</i>
                                        <span>安全测评和审计服务</span>
                                    </h3>
                                    <ul>
                                        <li class="submenu"><a href="javascript:;">系统源代码检测服务</a></li>
                                        <li class="submenu"><a href="javascript:;">系统上线安全测评</a></li>
                                        <li class="submenu"><a href="javascript:;">APP安全服务</a></li>
                                    </ul>
                                </div>
                            </div>

                            <div class="submenu-col col2">
                                <div class="submenu-item">
                                    <h3>
                                        <i class="iconfont">&#xe62b;</i>
                                        <span>Web安全防护</span>
                                    </h3>
                                    <ul>
                                        <li class="submenu"><a href="javascript:;">云WEB服务</a></li>
                                        <li class="submenu"><a href="javascript:;">WEB仿篡改服务</a></li>
                                        <li class="submenu"><a href="javascript:;">WEB漏洞检测服务</a></li>
                                        <li class="submenu"><a href="javascript:;">WEB监测服务</a></li>
                                    </ul>
                                </div>

                                <div class="submenu-item">
                                    <h3>
                                        <i class="iconfont">&#xe630;</i>
                                        <span>安全运维管理服务</span>
                                    </h3>
                                    <ul>
                                        <li class="submenu"><a href="javascript:;">基线核查服务</a></li>
                                        <li class="submenu"><a href="javascript:;">咨询服务</a></li>
                                        <li class="submenu"><a href="javascript:;">数据库审计服务</a></li>
                                    </ul>
                                </div>


                            </div>


                            <div class="submenu-col col3">
                                <div class="submenu-item">
                                    <h3>
                                        <i class="iconfont">&#xe62c;</i>
                                        <span>培训服务</span>
                                    </h3>
                                    <ul>
                                        <li class="submenu"><a href="javascript:;">CISP</a></li>
                                        <li class="submenu"><a href="javascript:;">BCP</a></li>
                                        <li class="submenu"><a href="javascript:;">prince2</a></li>
                                        <li class="submenu"><a href="javascript:;">ISO20000审计师</a></li>
                                        <li class="submenu"><a href="javascript:;">互联网+政务安全之个人信息保护</a></li>
                                        <li class="submenu"><a href="javascript:;">党政机关工作人员上网安全及应知应会</a></li>
                                    </ul>
                                </div>

                                <div class="submenu-item">
                                    <h3>
                                        <i class="iconfont">&#xe648;</i>
                                        <span>密码云安全服务</span>
                                    </h3>
                                    <ul>
                                        <li class="submenu"><a href="javascript:;">虚拟密码机VSM</a></li>
                                    </ul>
                                </div>


                            </div>



                        </div>

                    </li>
                    <li class="menu-item">
                        <h2>
                            <a href="assets.html">资产管理</a>
                        </h2>
                    </li>
                </ul>
            </div>


            <div class="user-message">
                <span class="label label-default">32</span>
            </div>


            <div class="login-user">
                <i class="iconfont">&#xe60d;</i>
                <a class="javascript:;">您好！系统管理员</a>
                <i class="iconfont">&#xe61c;</i>

                <div class="user-opt-panel">
                    <ul class="user-opt">
                        <li>
                            <a href="account_center.html">
                                <i class="iconfont">&#xe60d;</i>
                                <span class="pf-opt-name">账户信息</span>
                            </a>
                        </li>
                        <li>
                            <a href="order.html">
                                <i class="iconfont">&#xe60c;</i>
                                <span class="pf-opt-name">订单信息</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="iconfont">&#xe60f;</i>
                                <span class="pf-opt-name">结算信息</span>
                            </a>
                        </li>
                        <li class="div-line">
                            <a href="javascript:;">
                                <i class="iconfont">&#xe60e;</i>
                                <span class="pf-opt-name">资产信息</span>
                            </a>
                        </li>
                        <li class="div-line">
                            <a href="login.html">
                                <i class="iconfont">&#xe60b;</i>
                                <span class="pf-opt-name">退出</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</div>

<div id="bd">
    <div class="main-wrap-bk clearfix">
        <div class="sider-bar-bk">
            <div class="sider-bar-hd">
                <i class="iconfont">&#xe616;</i>
                <span>云服务</span>
            </div>
            <ul class="sider-nav">
                <li class="sider-nav-item current">
                    <h3>
                        <a href="javascript:;">
                            <i class="iconfont">&#xe610;</i>
                            <span>云服务总览</span>
                            <i class="iconfont arrow-right">&#xe611;</i>
                            <i class="iconfont arrow-down">&#xe615;</i>
                        </a>
                    </h3>
                    <ul class="sider-nav-s">
                        <li class="current"><a href="order.html">订单管理</a></li>
                        <li><a href="order-detail.html">订单详情</a></li>
                        <li><a href="order-handle.html">订单处理</a></li>
                    </ul>
                </li>

                <li class="sider-nav-item">
                    <h3>
                        <a href="javascript:;">
                            <i class="iconfont">&#xe613;</i>
                            <span>云检测预警</span>
                            <i class="iconfont arrow-right">&#xe611;</i>
                            <i class="iconfont arrow-down">&#xe615;</i>
                        </a>
                    </h3>
                    <ul class="sider-nav-s">
                        <li><a href="#">WEB网站检测服务</a></li>
                        <li><a href="#">WEB网站检测服务</a></li>
                        <li><a href="#">WEB网站检测服务</a></li>
                        <li><a href="#">WEB网站检测服务</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="bd-content-wrap">
            <div class="bd-content">
                <div class="title-left-line">订单管理</div>

                <div class="ip-manage page" data-tab="data-result">

                    <div class="search-box clearfix">
                        <div class="form-kv clearfix">
                            <div class="form-kv-label">提交时间范围：</div>
                            <div class="form-content">
                                <div class="date-pick">
                                    <input type="text" id="starttime" />
                                    <i class="iconfont">&#xe619;</i>
                                </div>
                                <span class="divsion">-</span>
                                <div class="date-pick">
                                    <input type="text" id="endtime" />
                                    <i class="iconfont">&#xe619;</i>
                                </div>
                            </div>
                        </div>

                        <div class="form-kv clearfix">
                            <div class="form-kv-label">订单编号：</div>
                            <div class="form-content">
                                <input type="text" />
                            </div>
                        </div>

                        <div class="form-kv leter4 clearfix">
                            <div class="form-kv-label">服务商：</div>
                            <div class="form-content">
                                <select>
                                    <option>请选择</option>
                                    <option>电信</option>
                                    <option>联通</option>
                                    <option>移动</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-kv leter3 clearfix">
                            <div class="form-kv-label">状态：</div>
                            <div class="form-content">
                                <select>
                                    <option>请选择</option>
                                    <option>已支付</option>
                                    <option>已过期</option>
                                </select>
                                <button class="btn btn-blue search-btn">查询</button>
                            </div>
                        </div>

                    </div>

                    <div class="grid">
                        <div class="grid-opt clearfix">
                            <button class="btn btn-red">
                                <i class="iconfont">&#xe627;</i>
                                <span>删除所选</span>
                            </button>
                        </div>

                        <table>
                            <colgroup>
                                <col width="50"></col>
                                <col width="50"></col>
                                <col width="180"></col>
                                <col width="*"></col>
                                <col width="110"></col>
                                <col width="80"></col>
                                <col width="120"></col>
                                <col width="180"></col>
                            </colgroup>

                            <thead>
                            <tr>
                                <th class="ck"><input type="checkbox" /></th>
                                <th>序号</th>
                                <th>订单编号</th>
                                <th>服务名称</th>
                                <th>服务商</th>
                                <th>服务时长</th>
                                <th>状态</th>
                                <th>提交时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>

                            <tbody>
                            <tr>
                                <td class="ck"><input type="checkbox" /></td>
                                <td class="num">1</td>
                                <td>201604031212</td>
                                <td>网站漏洞扫描</td>
                                <td>dell</td>
                                <td>1年</td>
                                <td>正常</td>
                                <td>2016-04-03</td>
                                <td class="opt"><a href="order-detail.html">详情</a><a href="order-handle.html">处理</a><a href="javascript:;" class="disabled">续订</a></td>
                            </tr>

                            <tr>
                                <td class="ck"><input type="checkbox" /></td>
                                <td class="num">1</td>
                                <td>201604031212</td>
                                <td>网站漏洞扫描</td>
                                <td>dell</td>
                                <td>1年</td>
                                <td class="impInfo">未支付</td>
                                <td>2016-04-03</td>
                                <td class="opt"><a href="order-detail.html">详情</a><a href="order-handle.html">处理</a><a href="javascript:;" class="disabled">续订</a></td>
                            </tr>
                            <tr>
                                <td class="ck"><input type="checkbox" /></td>
                                <td class="num">1</td>
                                <td>201604031212</td>
                                <td>网站漏洞扫描</td>
                                <td>dell</td>
                                <td>1年</td>
                                <td>正常</td>
                                <td>2016-04-03</td>
                                <td class="opt"><a href="javascript:;">详情</a><a href="javascript:;">处理</a><a href="javascript:;" class="disabled">续订</a></td>
                            </tr>

                            </tbody>
                        </table>
                    </div>

                    <div class="pagin pagination clearfix"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" th:src="@{../static/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{../static/js/common.js}"></script>
<script type="text/javascript" th:src="@{../plugins/datepicker/js/bootstrap-datepicker.js}"></script>
<script type="text/javascript" th:src="@{../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.min.js}"></script>
<script type="text/javascript" th:src="@{../static/js/jquery.pagination.js}"></script>
<script type="text/javascript" th:src="@{../plugins/select2/js/select2.min.js}"></script>
<script type="text/javascript">

    $("#starttime").datepicker({
        "language":"zh-CN",
        "format": 'yyyy-mm-dd'
    })
    $("#endtime").datepicker({
        "language":"zh-CN",
        "format": 'yyyy-mm-dd'
    })
    $(".date-pick .iconfont").click(function(){
        $(this).prev().trigger("focus");
    });

    $('.pagin').pagination(200, {
        current_page: 5,
        items_per_page: 10,
        callback: function(page, panel, evt){


        }
    });

    $('table').on('click', 'a', function() {
        $('.s-page').show();
    });

    $('.s-page').on('click', '.close-spage', function() {
        $('.s-page').hide();
    });

    $('select').select2();



</script>
</body>
</html>